<!-- 表单组件使用实例 -->
<template>
  <div class="p20">
    <el-tabs type="border-card">
      <el-tab-pane label="输入框">
        <el-form :inline="true" label-position="top">
          <el-form-item label="基础">
            <JYInput v-model.trim="form.input1" />
          </el-form-item>
          <el-form-item label="icon">
            <JYInput v-model.trim="form.input2" icon="el-icon-search" />
          </el-form-item>
          <el-form-item label="文字后缀">
            <JYInput v-model.trim="form.input3" append=".com" />
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top" class="clearfix">
          <el-form-item label="密码框">
            <JYInput v-model.trim="form.password1" :password="true" />
          </el-form-item>
          <el-form-item label="icon">
            <JYInput v-model.trim="form.password2" :password="true" icon="el-icon-unlock" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="数字框">
        <el-form :inline="true" label-position="top" class="clearfix">
          <el-form-item label="基础">
            <JYNumber v-model="form.number1" />
          </el-form-item>
          <el-form-item label="0-10">
            <JYNumber v-model="form.number2" :min="0" :max="10" />
          </el-form-item>
          <el-form-item label="每次递增2">
            <JYNumber v-model="form.number3" :step="2" />
          </el-form-item>
          <el-form-item label="小数点2位">
            <JYNumber v-model="form.number4" :precision="2" />
          </el-form-item>
          <el-form-item label="无按钮">
            <JYNumber v-model="form.number5" :controls="false" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文本域">
        <el-form :inline="true" label-position="top">
          <el-form-item label="基础">
            <JYTextarea v-model="form.textarea1" />
          </el-form-item>
          <el-form-item label="禁止缩放">
            <JYTextarea v-model="form.textarea2" resize="none" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="选择框">
        <el-form :inline="true" label-position="top">
          <el-form-item label="基础">
            <JYSelect v-model="form.selectValue" v-model:label="form.selectLabel" :options="selectList" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="日期时间">
        <el-form :inline="true" label-position="top">
          <el-form-item label="基础">
            <JYDate v-model="form.date1" value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="年">
            <JYDate v-model="form.date2" type="year" value-format="YYYY" />
          </el-form-item>
          <el-form-item label="年月">
            <JYDate v-model="form.date3" type="month" value-format="YYYY-MM" />
          </el-form-item>
          <el-form-item label="年月日时分秒">
            <JYDate v-model="form.date4" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item label="日期范围-年月">
            <JYDate v-model="form.date6" type="monthrange" value-format="YYYY-MM" />
          </el-form-item>
          <el-form-item label="日期范围-年月日">
            <JYDate v-model="form.date5" type="daterange" value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="日期范围-年月日时分秒">
            <JYDate v-model="form.date7" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import JYInput from '@/components/form/jy-input.vue'
import JYNumber from '@/components/form/jy-number.vue'
import JYTextarea from '@/components/form/jy-textarea.vue'
import JYSelect from '@/components/form/jy-select.vue'
import JYDate from '@/components/form/jy-date.vue'

export default defineComponent({
  components: {
    JYInput,
    JYNumber,
    JYTextarea,
    JYSelect,
    JYDate
  },
  setup() {
    
    return {
      form: ref({
        input1: null,
        input2: null,
        input3: null,
        password1: null,
        password2: null,
        number1: null,
        number2: null,
        number3: null,
        number4: null,
        number5: null,
        textarea1: null,
        textarea2: null,
        selectLabel: null,
        selectValue: null,
        date1: null,
        date2: null,
        date3: null,
        date4: null,
        date5: null,
        date6: null,
        date7: null
      }),
      selectList: ref([
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' },
        { value: '4', label: '选项4' }
      ])
    }
  }
})
</script>
